/*
 * @Date: 2023-04-11 23:46:26
 * @LastEditors: jacky02
 * @LastEditTime: 2023-05-02 23:41:57
 */
import { createFromIconfontCN } from "@ant-design/icons";
import { Layout, Menu, Breadcrumb } from "antd";
import { useState, useEffect } from "react";
import {
  useNavigate,
  useLocation,
  useRoutes,
} from "react-router-dom";
import routes from "../../router";
import "./index.css";
import antvLogo from "../../img/antv.png";
const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [breadName, setBreadName] = useState(["About", ""]);
  const navigate = useNavigate();
  const location = useLocation();
  //   //匹配hashRouter
  //   const baseUrl = "/antVIntro/#";
  let locationPath = [];
  function RenderRoutes() {
    const ele = useRoutes(routes);
    return ele;
  }
  const MyIcon = createFromIconfontCN({
    scriptUrl: "//at.alicdn.com/t/c/font_4011697_tneu5626py.js", // 在 iconfont.cn 上生成
  });
  const items = [
    getItem("AntV简介", "/", <MyIcon type="icon-ANT-black" />),
    getItem(
      "常规数据统计",
      "nomal",
      <MyIcon type="icon-tubiao-zhuzhuangtu" />,
      [getItem("G2", "/G2"), getItem("G2Plot", "/G2Plot"), getItem("S2", "/S2")]
    ),
    getItem("关系数据", "relate", <MyIcon type="icon-relation" />, [
      getItem("G6", "/G6"),
      getItem("X6", "/X6"),
      getItem("Graphin", "/Graphin"),
      getItem("XFLOW", "/XFLOW"),
    ]),
    getItem("地理空间数据", "local", <MyIcon type="icon-weizhi" />, [
      getItem("L7", "/L7"),
      getItem("L7Plot 2", "/L7Plot"),
    ]),
    getItem("移动端可视化", "mobile", <MyIcon type="icon-shouji" />, [
      getItem("F2", "/F2"),
      getItem("F2Native", "/F2Native"),
      getItem("F6", "/F6"),
      getItem("F7", "/F7"),
    ]),
  ];

  useEffect(() => {
    //防刷新丢失breadName
    // eslint-disable-next-line react-hooks/exhaustive-deps
    locationPath = location.pathname.split("/");
    //因为这里是用useLocation去做的，split的分割顺序和keypath的有区别
    //主要是为了当为About的时候，把About给提前，和keypath顺序一样
    setBreadName([
      locationPath[2] ? locationPath[2] : locationPath[1],
      locationPath[1],
    ]);
  }, []);
  function getItem(label, key, icon, children) {
    return {
      key,
      icon,
      children,
      label,
    };
  }
  function changeRoute({ keyPath }) {
    keyPath[1] = keyPath[1] ? keyPath[1] : "";
    keyPath[0] = keyPath[0] === "/" ? "About" : keyPath[0];
    navigate(keyPath[1] + keyPath[0]);
    setBreadName([keyPath[0], keyPath[1]]);
  }
  function breadNameChange() {
    let changeName = "";
    ///#/时丢失bread
    if (breadName[0] === "" && breadName[1] === "") {
      return setBreadName(["About"]);
    }
    switch (breadName[1]) {
      case "nomal":
        changeName = "常规数据统计";
        break;
      case "relate":
        changeName = "关系数据";
        break;
      case "local":
        changeName = "地理空间数据";
        break;
      case "mobile":
        changeName = "移动端可视化";
        break;
      default:
        changeName = breadName[1];
    }
    return changeName;
  }

  return (
    <Layout className="layout">
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <img src={antvLogo} alt="antvLogo" className="side" />
        <Menu
          theme="dark"
          defaultSelectedKeys={["1"]}
          mode="inline"
          items={items}
          onClick={changeRoute}
        />
      </Sider>
      <Layout className="site-layout">
        <Header className="header">AVA·智能可视化</Header>
        <Content className="content">
          <Breadcrumb style={{ margin: "16px 0" }}>
            {breadName[0] !== "About" && (
              <Breadcrumb.Item>{breadNameChange()}</Breadcrumb.Item>
            )}
            <Breadcrumb.Item>{breadName[0].replace("/", "")}</Breadcrumb.Item>
          </Breadcrumb>
          <div className="contentIn">
            <div className="graph">
              {breadName[0] && breadName[0] !== "About" && (
                <div className="title">{breadName[0].replace("/", "")}展示</div>
              )}
              <RenderRoutes></RenderRoutes>
            </div>
          </div>
        </Content>
        <Footer className="footer">AVA ©2023 Created by Jacky</Footer>
      </Layout>
    </Layout>
  );
};
export default App;
